<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="base.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>身体信息录入</title>
    <script type="text/javascript" src="static/js/common-css.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700">
    <style type="text/css">
        .bg-white {
            padding-left: 20px;
            padding-top: 20px;
        }

        .bg-white .input-material {
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div class="col-lg-6 bg-white">
    <div class="form d-flex align-items-center">
        <div class="content">
            <div class="form-group">
                <span>姓名</span> <input id="body-nickname" class="input-material" type="text" name="nickName"
                                       disabled="disabled"
                                       value="${ user.nickName }">
            </div>
            <div class="form-group">
                <span>学院</span> <input id="body-colloge" class="input-material" type="text"
                                       disabled="disabled"
                                       name="colloge" value="${ user.colloge }">
            </div>
            <div class="form-group">
                <span>健康状况</span> <select id="body-health" class="input-material form-control" name="health">
                <option>-请选择-</option>
                <option value="健康">健康</option>
                <option value="不健康">不健康</option>
            </select>
                <div class="invalid-feedback">请选择健康状况</div>
            </div>
            <div class="form-group">
                <span>体温</span> <input id="body-temperature" class="input-material" type="text"
                                       onkeyup="clearNoNum(this)"
                                       oninput="value=value.replace(/[^\d.]/g,'')" name="temperature"
                                       placeholder="请输入体温">
                <div class="invalid-feedback">体温必须在33~45度之间</div>
            </div>
            <div class="form-group">
                <span>是否外出</span> <select id="body-goOut" class="input-material form-control" name="goOut">
                <option>-请选择-</option>
                <option value="是">是</option>
                <option value="否">否</option>
            </select>
                <div class="invalid-feedback">请选择是否外出</div>
            </div>
            <div class="form-group">
                <span>工作状态</span> <select id="body-workState" class="input-material form-control" name="workState">
                <option>-请选择-</option>
                <option value="居家工作">居家工作</option>
                <option value="出差">出差</option>
                <option value="办公室工作">办公室工作</option>
            </select>
                <div class="invalid-feedback">请选择工作状态</div>
            </div>
            <div class="form-group">
                <span>备注</span> <input id="body-notice" class="input-material" type="text"
                                       name="notice" placeholder="备注信息">
            </div>
            <div class="form-group">
                <button id="submit" type="button" name="submit" class="btn btn-primary">打卡</button>
                <button id="reset" type="reset" name="reset" class="btn btn-primary" style="margin-left: 40px">重置
                </button>
            </div>
        </div>
    </div>
</div>
<script src="static/js/common-js.js"></script>
<script>
    $(function () {
        /*错误class  form-control is-invalid
        正确class  form-control is-valid*/
        var flagTemperature = false;
        var flagHealth = false;
        var flagGoOut = false;
        var flagWorkState = false;
        var goOut, workState, temperature, health;
        var notice = '-';
        $("#body-temperature").change(function () {
            temperature = $(this).val();
            if (temperature < 33 || temperature > 45) {
                $(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
                flagTemperature = false;
            } else {
                $(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
                flagTemperature = true;
            }
        })
        $("#body-health").change(function () {
            health = $(this).val();
            if (!health || health == '-请选择-') {
                $(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
                flagHealth = false;
            } else {
                $(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
                flagHealth = true;
            }
        })
        $("#body-goOut").change(function () {
            goOut = $(this).val();
            if (!goOut || goOut == '-请选择-') {
                $(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
                flagGoOut = false;
            } else {
                $(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
                flagGoOut = true;
            }
        })
        $("#body-workState").change(function () {
            workState = $(this).val();
            if (!workState || workState == '-请选择-') {
                $(this).removeClass("form-control is-valid").addClass("form-control is-invalid");
                flagWorkState = false;
            } else {
                $(this).removeClass("form-control is-invalid").addClass("form-control is-valid");
                flagWorkState = true;
            }
        })
        $("#body-notice").change(function () {
            notice = $(this).val();
        })


        $("#submit").click(function () {
            console.log(flagHealth , flagGoOut , flagTemperature , flagHealth , flagWorkState)
            if (flagHealth && flagGoOut && flagTemperature && flagHealth && flagWorkState) {
                $.ajax({
                    url: "${baseurl}/health/saveBodyInfo",
                    type: 'POST',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({
                        'notice': notice,
                        'workState': workState,
                        'temperature': temperature,
                        'health': health,
                        'goOut': goOut,
                        'nickName': '${user.nickName}',
                    }),
                    success: function (data) {
                        alert(data.message)
                        if (data.result == true) {
                            $("input").each(function () {
                                $(this).removeClass("form-control is-invalid").val("");
                            });
                            $("#body-health").removeClass("is-valid is-invalid").val("-请选择-");
                            $("#body-goOut").removeClass("is-valid is-invalid").val("-请选择-");
                            $("#body-workState").removeClass("is-valid is-invalid").val("-请选择-");
                            $("#body-temperature").val('');
                            $("#body-nickname").val('${user.nickName}');
                            $("#body-colloge").val('${user.colloge}');
                        } else {
                            if (data.path) {
                                top.location.href = data.path;
                            }
                        }
                    }
                });
            } else {
                if (!flagTemperature) {
                    $("#body-temperature").addClass("form-control is-invalid");
                }
                if (!flagHealth) {
                    $("#body-health").addClass("form-control is-invalid");
                }
                if (!flagGoOut) {
                    $("#body-goOut").addClass("form-control is-invalid");
                }
                if (!flagWorkState) {
                    $("#body-workState").addClass("form-control is-invalid");
                }
            }
        })
        // 重置
        $("#reset").click(function () {
            $("input").each(function () {
                $(this).removeClass("form-control is-invalid").val("");
            });
            $("#body-health").removeClass("is-valid is-invalid").val("-请选择-");
            $("#body-goOut").removeClass("is-valid is-invalid").val("-请选择-");
            $("#body-workState").removeClass("is-valid is-invalid").val("-请选择-");
            $("#body-notice").val('');
            $("#body-temperature").val('');
            $("#body-nickname").val('${user.nickName}');
            $("#body-colloge").val('${user.colloge}');
        })
    })
</script>
</body>
</html>
